import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../store/hooks';
import { login } from '../store/slices/authSlice';

// 登录页组件：提交账号/密码到 RTK 的 login thunk，成功后跳转首页
const LoginPage: React.FC = () => {
  // 路由跳转钩子
  const navigate = useNavigate();
  // Redux 派发器
  const dispatch = useAppDispatch();
  // 从 Redux 读取认证状态（用户、加载、错误）
  const { user, loading, error } = useAppSelector((state) => state.auth);

  // 本地状态：账号与密码
  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');
  // 标记是否由本页提交触发登录
  const [didSubmit, setDidSubmit] = useState(false);

  // 监听登录成功（有 user）后跳转到首页
  useEffect(() => {
    // 仅当本页提交后且拿到 user 才跳转，避免因本地持久化的已登录状态导致进入 /login 就立刻跳转
    if (didSubmit && user) {
      // 登录成功提示
      try {
        window.alert('登录成功');
      } catch {}
      navigate('/');
    }
  }, [user, navigate, didSubmit]);

  // 提交表单：派发登录请求
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 记录为本页触发的登录
    setDidSubmit(true);
    // 调用 RTK 异步登录动作
    dispatch(login({ account, password }));
  };

  // 简单内联样式，避免引入新样式文件（保持页面可用）
  const containerStyle: React.CSSProperties = {
    minHeight: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: 'var(--bg-primary)',
    color: 'var(--text-primary)'
  };

  const cardStyle: React.CSSProperties = {
    width: 360,
    padding: 24,
    borderRadius: 12,
    background: 'var(--panel-bg)',
    border: '1px solid var(--panel-border)',
    boxShadow: 'var(--panel-shadow)'
  };

  const inputStyle: React.CSSProperties = {
    width: '100%',
    padding: '10px 12px',
    marginTop: 8,
    marginBottom: 16,
    borderRadius: 8,
    border: '1px solid var(--select-border)',
    background: 'var(--select-bg)',
    color: 'var(--text-primary)'
  };

  const buttonStyle: React.CSSProperties = {
    width: '100%',
    padding: '10px 12px',
    borderRadius: 8,
    border: '1px solid var(--btn-border)',
    background: 'var(--btn-bg)',
    color: 'var(--text-primary)',
    cursor: 'pointer'
  };

  const wechatButtonStyle: React.CSSProperties = {
    width: '100%',
    padding: '10px 12px',
    borderRadius: 8,
    border: '1px solid var(--btn-border)',
    background: 'rgba(0, 180, 0, 0.2)',
    color: 'var(--text-primary)',
    cursor: 'pointer',
    marginTop: 10
  };

  const titleStyle: React.CSSProperties = {
    fontSize: 18,
    fontWeight: 600,
    marginBottom: 12,
    textAlign: 'center'
  };

  const errorStyle: React.CSSProperties = {
    color: '#ff6b6b',
    marginBottom: 12,
    minHeight: 18
  };

  return (
    <div style={containerStyle}>
      <form style={cardStyle} onSubmit={handleSubmit}>
        <div style={titleStyle}>账号登录</div>
        <label>
          账号
          <input
            style={inputStyle}
            type="text"
            value={account}
            onChange={(e) => setAccount(e.target.value)}
            placeholder={'请输入账号'}
            required
          />
        </label>
        <label>
          密码
          <input
            style={inputStyle}
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder={'请输入密码'}
            required
          />
        </label>
        <div style={errorStyle}>{error ? error : ' '}</div>
        <button style={buttonStyle} type="submit" disabled={loading}>
          {loading ? '正在登录...' : '登录'}
        </button>
        {/* 第三方登录 - 微信登录按钮 */}
        <button
          type="button"
          style={wechatButtonStyle}
          onClick={() => {
            // 预留第三方登录逻辑接入点（如微信扫码）
            try { window.alert('即将支持微信登录'); } catch {}
          }}
        >
          微信登录
        </button>
      </form>
    </div>
  );
};

export default LoginPage;


